<template>
  <div class="dialog">
    <el-dialog
      :width="width"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="closeOnClickModal"
      :visible="show"
      :top="top"
      @close="dismiss()"
    >
      <div class="main-box" :style="'padding: 0px ' + pr + ' ' + pb + ' ' + pl + ';'">
        <slot></slot>
      </div>

      <div slot="title" :style="'padding: ' + pt + ' ' + pr + ' 0px ' + pl + ';'" class="title-box nas">
        <div class="title rl1 sc10">
          {{ title }}
        </div>
        <div v-if="showClose" class="close-btn nas" @click="dismiss()">
          <img src="@/assets/dialog-close.webp" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '520px'
    },
    top: {
      type: String,
      default: '8px'
    },
    pt: {
      type: String,
      default: '8px'
    },
    pb: {
      type: String,
      default: '0px'
    },
    pl: {
      type: String,
      default: '12px'
    },
    pr: {
      type: String,
      default: '12px'
    },
    showClose: {
      type: Boolean,
      default: true
    },
    escClose: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    if (this.escClose) {
      const __this = this
      this.$nextTick(() => {
        document.addEventListener('keyup', (e) => {
          if (e.keyCode === 27 && __this.escClose) {
            __this.dismiss()
          }
        })
      })
    }
  },
  methods: {
    dismiss() {
      this.$emit('close', false)
    }
  }
}
</script>

<style scoped lang="scss">
.title-box {
  display: flex;
  align-items: center;

  .title {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }

  .close-btn {
    flex: 0 0 36px;
    font-size: 0px;
    text-align: right;
    cursor: pointer;

    img {
      width: 12px;
      height: 12px;
    }
  }
}

/deep/ .el-dialog__wrapper {
  background-color: rgba(#000000, 0.66) !important;
}

/deep/ .el-dialog__header {
  padding: 0px;
}

/deep/ .el-dialog {
  height: auto !important;

  border-radius: 12px;
  box-shadow: 0px 0px 8px gray;
}

/deep/ .el-dialog__body {
  padding: 0px;
}
</style>
